<template>
  <ComWrapper>
    <el-card shadow="never">
			<el-tabs tab-position="top">
				<el-tab-pane label="普通打印">
					<el-alert title="打印当前页面已存在的元素,如包含.no-print样式就忽略,分页打印就需要{page-break-after: always}控制" type="success" style="margin-bottom:20px;"></el-alert>
					<el-button type="primary" @click="ordinaryPrint">普通打印</el-button>
					<div style="height:20px"></div>
					<div class="printMain" ref="printRef">
						<div class="item">
              打印内容1 <el-icon><el-icon-eleme-filled /></el-icon> 
              <p class="no-print">忽略打印</p>
              </div>
						<div style="page-break-after: always;" />
						<div class="item">打印内容2</div>
					</div>
				</el-tab-pane>
				<el-tab-pane label="动态打印">
					<el-alert title="打印创建的DOM结构,适用于远程获取模板后打印" type="success" style="margin-bottom:20px;"></el-alert>
					<el-button type="primary" @click="dynamicPrint">动态打印</el-button>
				</el-tab-pane>
			</el-tabs>
		</el-card>
  </ComWrapper>
</template>

<script setup>
import {ref} from 'vue'
import Print from '@/function/print'

const printRef = ref(null)

function ordinaryPrint() {
  const printRefVal = printRef.value
  if (!printRefVal) return
  Print(printRefVal)
}
function dynamicPrint() {
  const VNode = "<h2>TITLE</h2><p>后创建的DOM结构</p>"
	Print(VNode)
}
</script>

<style scoped lang="">

</style>